import React, { Component } from 'react';
import axios from "../../../../../../util/axios"
import { Select, Input, Button } from 'antd';
import One from "./childer/one"
import { Tabs } from 'antd';
import "./index.css"
const { Option } = Select;
const { TabPane } = Tabs;
let DataList = []
class Order_admin extends Component {
    state = {
        data: [],
        shippingList: [],
        dShippingList: [],
        refundsList: [],
        tRefundsList: [],
        nameVal: "",
        idVal: ""
    }
    componentDidMount() {
        axios.get("/orderform").then(res => {
            this.setState({
                data: res.data.data
            })
            DataList = res.data.data
        })
    }
    handleChange = (value) => {
        if (value === "unselected") {
            this.setState({
                data: DataList
            })
        } else if (value === "shipping") {
            // 已发货
            let result = DataList.filter(item => {
                return item.lls.includes("已发货")
            })
            this.setState({
                data: result,
                shippingList: result
            })
        } else if (value === "dShipping") {
            let result = DataList.filter(item => {
                return item.lls.includes("待发货")
            })
            this.setState({
                data: result,
                dShippingList: result
            })
        } else if (value === "refunds") {
            // 已退款
            let result = DataList.filter(item => {
                return item.lls.includes("已退款")
            })
            this.setState({
                data: result,
                refundsList: result
            })
        } else if (value === "tRefunds") {
            // 已退款
            let result = DataList.filter(item => {
                return item.lls.includes("未退款")
            })
            this.setState({
                data: result,
                tRefundsList: result
            })
        }
    }
    nameChange = (e) => {
        this.setState({
            nameVal: e.target.value
        })
        const result = DataList.filter(item => {
            return item.name.includes(e.target.value)
        })
        this.setState({
            data: result
        })
        
    }
    idChange = (e) => {
        this.setState({
            idVal: e.target.value
        })
        let result = DataList.filter(item => item.id === e.target.value * 1)
        this.setState({
            data: result
        })
    }
    render() {
        return (
            <div className="order_admin">
                <div className="order_header">
                    <Select defaultValue="number" style={{ width: 180, marginRight: 20 }} onChange={this.handleChange}>
                        <Option value="number">订单号</Option>
                        <Option value="name">买家姓名</Option>
                        <Option value="tel">买家电话</Option>
                    </Select>
                    <div className="refundStatus" style={{ marginRight: 20 }}>
                        <span>退款状态：</span>
                        <Select defaultValue="unselected" style={{ width: 180 }} onChange={this.handleChange}>
                            <Option value="unselected">未选定</Option>
                            <Option value="refunds">已退款</Option>
                            <Option value="tRefunds">未退款</Option>
                        </Select>
                    </div>
                    <div className="orderStatus" style={{ marginRight: 20 }}>
                        <span>订单状态：</span>
                        <Select defaultValue="unselected" style={{ width: 180 }} onChange={this.handleChange}>
                            <Option value="unselected">未选定</Option>
                            <Option value="dShipping">待发货</Option>
                            <Option value="shipping">已发货</Option>
                        </Select>
                    </div>
                    <div className="userID" style={{ marginRight: 20 }}>
                        <span>用户ID：</span>
                        <Input value={this.state.idVal} onChange={this.idChange} style={{ width: 150 }} placeholder="请输入内容" />
                    </div>
                    <div className="shopTitle" style={{ marginRight: 20 }}>
                        <span>商品名称：</span>
                        <Input value={this.state.nameVal} onChange={this.nameChange} style={{ width: 150 }} placeholder="请输入内容" />
                    </div>
                    <Button type="primary" style={{ marginRight: 20 }}>搜索</Button>
                </div>
                <div className="order_main">
                    <Tabs defaultActiveKey="1">
                        <TabPane tab="全部" key="1">
                            <One data={this.state.data.length ? this.state.data : DataList}></One>
                        </TabPane>
                        <TabPane tab="待发货" key="2">
                            <One data={this.state.dShippingList}></One>
                        </TabPane>
                        <TabPane tab="已发货" key="3">
                            <One data={this.state.shippingList}></One>
                        </TabPane>
                        <TabPane tab="未退款" key="4">
                            <One data={this.state.tRefundsList}></One>
                        </TabPane>
                        <TabPane tab="已退款" key="5">
                            <One data={this.state.refundsList}></One>
                        </TabPane>
                    </Tabs>

                </div>
            </div>
        );
    }
}

export default Order_admin;
